<template>
    <div id="parkchannel">
        <navheader></navheader>
        <el-breadcrumb separator="/" class="pd-g">
            <el-breadcrumb-item :to="{ path: '/' }">线下运维</el-breadcrumb-item>
            <el-breadcrumb-item>车场管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form :label-position="labelPosition" label-width="80px" :model="searchForm" ref="searchForm">
            <el-row>
                <el-col :span="10" :offset="3">
                    <el-form-item label="车场名称" prop="park_code">
                        <el-select v-model="searchForm.park_code" filterable clearable placeholder="请选择">
                            <el-option
                                    v-for="item in park_codes"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :md="{span:6, offset:2}">
                    <el-button type="primary" icon="search" @click="submitSearch">搜索</el-button>
                    <el-button @click="resetForm('searchForm')" type="warn">重置</el-button>
                    <el-button @click="create" type="success">新建</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!--表格-->
        <el-table
                :data="parkchannels"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="parking_name"
                    label="车场名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="park_code"
                    label="车场编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="arm_code"
                    label="设备编号">
            </el-table-column>
            <el-table-column
                    prop="arm_version"
                    label="设备版本">
            </el-table-column>
            <el-table-column
                    prop="entrance_name"
                    label="入口名称">
            </el-table-column>
            <el-table-column
                    label="出口名称"
                    prop="exit_name">
            </el-table-column>
            <el-table-column
                    label="最近上报时间"
                    prop="update_time">
            </el-table-column>
            <el-table-column label="操作" style="width: 100px;">
                <template scope="scope">
                    <el-button
                            size="mini"
                            @click="pushWarning(scope.row.id)">发报警
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="addAttention(scope.row.id)">不关注
                    </el-button>
                    <el-button
                            size="mini"
                            type="warn"
                            @click="addAttention(scope.row.id)">入口抬杆
                    </el-button>
                    <el-button
                            size="mini"
                            type="info"
                            @click="addAttention(scope.row.id)">出口抬杆
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalList">
        </el-pagination>
    </div>
</template>
<script>
    import navheader from '../public/Nav.vue'
    export default {
        data(){
            return {
                searchForm: {
                    park_code: '',
                },
                parkchannels:[],
                park_codes: [],
                labelPosition: 'right',
                totalList: 0,
                pageSize: 0,
                currentPage: 1,
            }
        },
        created(){
            this.getArrayDataByGet('park_codes', '/parkinfo/getallpark', {}, 'parkinfo_parkcodes');
            this.submitSearch();
        },
        methods: {
            handleCurrentChange(page){
                let params = this.searchForm;
                if(params != undefined){
                    params['page'] = page;
                }
                this.httpGetList('/parkchannel/index', {params:params}, 'parkchannels');
            },
            submitSearch(){
                this.httpGetList('/parkchannel/index',{params:this.searchForm},'parkchannels');
            },
            resetForm(formName){
                this.$refs[formName].resetFields();
            },
            create(){
                this.$router.push('/parkinfoform');
            },
            pushWarning(id){
                this.httpPost('/default/alert',{type:1,id:id},'');
            },
            addAttention(id){
                this.httpPost('/parkchannel/attention',{attention:1,id:id},'');
            },
            tableRowClassName(row, index) {
                var date = Date.parse(row.update_time.replace(/-/g,"/"));
                var now = new Date().setMinutes(new Date().getMinutes()+10);
                if(date < now){
                    return 'positive-row';
                }
            },
        },
        components: {
            navheader
        }
    }
</script>
<style proped>
    .bg-red {border:1px solid red}
</style>